<meta charset="UTF-8" />
<div class="comPage">
  <div class="comModal m-t-10">
    <ul class="comTabBox">
      <li class="active">待确认</li>
      <li class="">有效资产</li>
      <li class="">无效资产</li>
    </ul>
  </div>
  <div class="comModal m-t-15 p-15">
    <div class="flex items-center">
      <div class="flex-1">
        <div class="layui-input-wrap w360">
          <div class="layui-input-prefix">
            <i class="iconfont icon-search gray_999"></i>
          </div>
          <input type="text" class="layui-input" />
        </div>
      </div>
      <div class="btn-empty btn-empty-oper m-r-10 blue curPointer">
        收起选项<i class="iconfont icon-arrow-down"></i>
      </div>
      <div class="btn-empty m-r-10">重置</div>
      <div class="layui-btn layui-btn-sm layui-btn-normal">查询</div>
    </div>
    <div class="searchFormBox layui-form m-t-15">
      <div class="flex wrap">
        <div class="form-item flex items-center m-r-20">
          <div class="item-name">设备类型</div>
          <div class="item-content">
            <select id="equipmentType" lay-filter="equipmentType">
              <option value="">请选择</option>
              <option value="AAA">选项 A</option>
              <option value="BBB">选项 B</option>
              <option value="CCC">选项 C</option>
            </select>
          </div>
        </div>
        <div class="form-item flex items-center m-r-20">
          <div class="item-name">更新时间</div>
          <div class="item-content">
            <input type="text" class="layui-input" id="updateTime" placeholder="请选择" />
          </div>
        </div>
        <div class="form-item flex items-center m-r-20">
          <div class="item-name">标签</div>
          <div class="item-content">
            <select id="equipmentMark" value="0" lay-filter="equipmentMark">
              <option value="" selected disabled hidden>请选择</option>
              <option value="AAA">选项 A</option>
              <option value="BBB">选项 B</option>
              <option value="CCC">选项 C</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex m-t-15">
    <div class="comModal w300 p-15 relative" style="min-height: 500px">
      <div class="layui-input-wrap fullWidth">
        <input type="text" placeholder="请输入" class="layui-input" />
        <div class="layui-input-suffix">
          <i class="iconfont icon-search gray_999"></i>
        </div>
      </div>
      <div id="leftTreeDemo" class="leftTree fullWidth m-t-10"></div>
      <div id="treeModalOper" class="modalOper">
        <i class="iconfont icon-more-down"></i>
      </div>
    </div>
    <div class="comModal flex-1 p-15 m-l-15">
      <div class="flex">
        <div class="flex-1">
          <div class="bantchOperClick flex items-center">
            <button class="layui-btn layui-btn-sm layui-btn-primary layui-border" onclick="bantchOper()">
              批量操作
            </button>
            <div class="m-l-5">共<span class="blue" id="totalNum">0</span>条记录</div>
          </div>
          <div class="bantchOperBox flex items-center hide">
            <div class="layui-btn layui-btn-sm layui-btn-primary layui-border" onclick="bantchOper()">
              取消操作
            </div>
            <div id="bantchDelete" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-disabled">
              选中删除
            </div>
            <div id="bantchExport" class="layui-btn layui-btn-sm layui-btn-default layui-btn-disabled">
              选中导出
            </div>
            <div class="m-l-5">已选中<span class="blue" id="checkedNum">0</span>数据</div>
          </div>
        </div>
        <div>
          <div class="layui-btn layui-btn-sm layui-btn-normal" onclick="showAddDialog();">添加</div>
          <div class="layui-btn layui-btn-sm layui-btn-normal">批量导入</div>
        </div>
      </div>
      <div class="m-t-15">
        <table class="layui-hide" id="test" lay-filter="test"></table>
      </div>
    </div>
    <div class="layer-container" id="bantchOperLayer" style="display: none">
      <div class="layui-form p-l-20">
        <div class="flex wrap">
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name">设备状态</div>
            <div class="item-content">
              <select value="0" lay-filter="equipmentMark">
                <option value="" selected disabled hidden>请选择</option>
                <option value="AAA">选项 A</option>
                <option value="BBB">选项 B</option>
                <option value="CCC">选项 C</option>
              </select>
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name"><span class="red">*</span>设备名称</div>
            <div class="item-content">
              <input type="text" class="layui-input" placeholder="请选择" />
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name"><span class="red">*</span>设备类型</div>
            <div class="item-content">
              <select value="0" lay-filter="equipmentMark">
                <option value="" selected disabled hidden>请选择</option>
                <option value="AAA">选项 A</option>
                <option value="BBB">选项 B</option>
                <option value="CCC">选项 C</option>
              </select>
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name"><span class="red">*</span>所属单位</div>
            <div class="item-content">
              <select value="0" lay-filter="equipmentMark">
                <option value="" selected disabled hidden>请选择</option>
                <option value="AAA">选项 A</option>
                <option value="BBB">选项 B</option>
                <option value="CCC">选项 C</option>
              </select>
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name"><span class="red">*</span>是否国产化</div>
            <div class="item-content flex">
              <div style="width:20%">
                <select value="0" lay-filter="equipmentMark">
                  <option value="" selected disabled hidden>请选择</option>
                  <option value="AAA">选项 A</option>
                  <option value="BBB">选项 B</option>
                  <option value="CCC">选项 C</option>
                </select>
              </div>
              <div class="flex-1">
                <select value="0" lay-filter="equipmentMark">
                  <option value="" selected disabled hidden>请选择</option>
                  <option value="AAA">选项 A</option>
                  <option value="BBB">选项 B</option>
                  <option value="CCC">选项 C</option>
                </select>
              </div>
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name"><span class="red">*</span>是否上云</div>
            <div class="item-content flex">
              <div style="width:20%">
                <select value="0" lay-filter="equipmentMark">
                  <option value="" selected disabled hidden>请选择</option>
                  <option value="AAA">选项 A</option>
                  <option value="BBB">选项 B</option>
                  <option value="CCC">选项 C</option>
                </select>
              </div>
              <div class="flex-1">
                <select value="0" lay-filter="equipmentMark">
                  <option value="" selected disabled hidden>请选择</option>
                  <option value="AAA">选项 A</option>
                  <option value="BBB">选项 B</option>
                  <option value="CCC">选项 C</option>
                </select>
              </div>
            </div>
          </div>
          <div class="flex-1 fullWidth flex form-item form-item-col">
            <div class="item-name">系统域名列表</div>
            <div class="item-content flex">
              <input type="text" class="layui-input m-r-20" placeholder="请选择" />
              <input type="text" class="layui-input m-r-20" placeholder="请选择" />
              <input type="text" class="layui-input m-r-20" placeholder="请选择" />
              <button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-disabled">添加</button>
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name">备注时间</div>
            <div class="item-content">
              <input type="text" id="dialogFormDate" class="layui-input" placeholder="请选择" />
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name">时间区间</div>
            <div class="item-content">
              <input type="text" id="dialogFormDateRange" class="layui-input" placeholder="请选择时间区间" />
            </div>
          </div>
          <div class="flex-1 flex form-item form-item-col">
            <div class="item-name">备注</div>
            <div class="item-content">
              <textarea class="layui-textarea" placeholder="请输入内容"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="./js/data.js"></script>
<script>
  $(function () {
    $.layform.render("select");
    $.laydate.render({
      elem: "#updateTime",
      type: "datetime",
      theme: '#409efe',
    });
    $.layform.on("select(equipmentType)", function (data) {
      var elem = data.elem; // 获得 select 原始 DOM 对象
      var value = data.value; // 获得被选中的值
      var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
    });
    $.laytree.render({
      elem: "#leftTreeDemo",
      data: treeData,
      showCheckbox: true,
      onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
      id: "demo-id-1",
      isJump: true, // 是否允许点击节点时弹出新窗口跳转
      click: function (obj) {
        var data = obj.data; //获取当前点击的节点数据
        layer.msg(
          "状态：" + obj.state + "<br>节点数据：" + JSON.stringify(data)
        );
      },
    });
    $.layutil.event("lay-on", {
      getChecked: function (othis) {
        var checkedData = tree.getChecked("demo-id-1"); // 获取选中节点的数据

        layer.alert(JSON.stringify(checkedData), { shade: 0 });
        console.log(checkedData);
      },
      setChecked: function () {
        tree.setChecked("demo-id-1", [12, 16]); // 勾选对应 id 值的节点
      },
      reload: function () {
        tree.reload("demo-id-1", {}); // 重载实例
      },
    });
    $(".comTabBox")
      .off("click", "li")
      .on("click", "li", function () {
        $(this).addClass("active").siblings().removeClass("active");
      });
    $(".btn-empty-oper")
      .off("click")
      .on("click", function () {
        $(this).toggleClass("btn-empty-oper-open");
        if ($(this).hasClass("btn-empty-oper-open")) {
          $(".searchFormBox").show();
        } else {
          $(".searchFormBox").hide();
        }
      });
    //左侧树控制
    $("#treeModalOper")
      .off("click")
      .on("click", function () {
        $(this).toggleClass("modalOperClose");
        $(this).parents(".comModal").toggleClass("comModalClose");
      });

    $.laytable.render({
      elem: '#test',
      // url: '/static/json/2/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
      data: tableData,
      // toolbar: '#toolbarDemo',
      // defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
      //   title: '提示',
      //   layEvent: 'LAYTABLE_TIPS',
      //   icon: 'layui-icon-tips',
      //   onClick: function (obj) { // 2.9.12+
      //     layer.alert('自定义工具栏图标按钮');
      //   }
      // }],
      // height: 'full-30', // 最大高度减去其他容器已占有的高度差
      maxHeight: 500,
      css: [ // 重设当前表格样式
        '.layui-table-tool-temp{padding-right: 145px;}'
      ].join(''),
      cellMinWidth: 80,
      totalRow: false, // 开启合计行
      page: true,
      cols: [comTableCols],
      done: function () {
        var id = this.id;
        $("#totalNum").text(tableData.length);
        // 下拉按钮测试
        $.laydropdown.render({
          elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
          data: [{
            id: 'add',
            title: '添加'
          }, {
            id: 'update',
            title: '编辑'
          }, {
            id: 'delete',
            title: '删除'
          }],
          // 菜单被点击的事件
          click: function (obj) {
            var checkStatus = $.laytable.checkStatus(id)
            var data = checkStatus.data; // 获取选中的数据
            switch (obj.id) {
              case 'add':
                layer.open({
                  title: '添加',
                  type: 1,
                  area: ['80%', '80%'],
                  content: '<div style="padding: 16px;">自定义表单元素</div>'
                });
                break;
              case 'update':
                if (data.length !== 1) return layer.msg('请选择一行');
                layer.open({
                  title: '编辑',
                  type: 1,
                  area: ['80%', '80%'],
                  content: '<div style="padding: 16px;">自定义表单元素</div>'
                });
                break;
              case 'delete':
                if (data.length === 0) {
                  return layer.msg('请选择一行');
                }
                layer.msg('delete event');
                break;
            }
          }
        });
        $.laytable.on('checkbox(test)', function (obj) {
          var tableObj = $.laytable.checkStatus('test');
          if (tableObj.data.length > 0) {
            $("#bantchExport,#bantchDelete").removeClass("layui-btn-disabled");
          } else {
            $("#bantchExport,#bantchDelete").addClass("layui-btn-disabled");
          }
          $('#checkedNum').text(tableObj.data.length);
        });
        $('.layui-table-body tr').hover(function () {
          $(this).find('.tableOperBox').removeClass('hide')
        }, function () {
          $(this).find('.tableOperBox').addClass('hide')
        })
      }
    });
  });
  function bantchOper() {
    $(".bantchOperClick").toggleClass("hide");
    $(".bantchOperBox").toggleClass("hide");
    if ($(".bantchOperClick").hasClass("hide")) {
      var cols = JSON.parse(JSON.stringify(comTableCols));
      cols.unshift({ type: 'checkbox', fixed: 'left' });

      $.laytable.reload('test', {
        cols: [cols],
        done: function () {
          $('#checkedNum').text(0);
          //还原Ui
          $('.layui-table-header .layui-unselect .layui-icon').removeClass('layui-icon-indeterminate').addClass('layui-icon-ok');
          $('.layui-table-header input[type="checkbox"]').prop('checked', false);
          $('.layui-table-body input[type="checkbox"]').prop('checked', false);
          $('.layui-table-body tr').removeClass('layui-table-checked')
        }
      }, true);
    } else {
      $.laytable.reload('test', {
        cols: [comTableCols]
      }, true)
    }
  };
  function showAddDialog() {
    $.layer.open({
      title: '新增设备',
      type: 0,
      area: ['80%', '80%'],
      btn: ['取消', '确认'],
      content: $("#bantchOperLayer").html(),
      success: function (layero, index) {
        $.layform.render("select");
        $.laydate.render({
          elem: "#dialogFormDate",
          type: "datetime",
          theme: '#409efe',
        });
        $.laydate.render({
          elem: "#dialogFormDateRange",
          type: "datetime",
          theme: '#409efe',
          range: '~',
        });
      },
      btn1: function (index, layero) {
        $.layer.close(index);
      },
      btn2: function (index, layero) {
        $.layer.close(index);
      }
    })
  };
</script>